<template>
  <div class="all">
    <div class="a-nav">
      <el-select v-model="status" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" @click="query">查询</el-button>
    </div>
    <div>
      <el-table :data="list" :header-cell-style="{background:'#eef3f7'}">
        <el-table-column align="center" label="序号" width="50" type="index"></el-table-column>
        <el-table-column align="center" prop="realName" label="真实姓名"></el-table-column>
        <el-table-column align="center" prop="idCardNum" label="证件号码"></el-table-column>
        <el-table-column align="center" label="证件正面">
          <template slot-scope="scope">
            <el-image :src="scope.row.idCardFront" class="idCard" :preview-src-list="getImgList(scope.row.idCardFront)"></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="证件背面">
          <template slot-scope="scope">
            <el-image :src="scope.row.idCardBack" class="idCard"  :preview-src-list="getImgList(scope.row.idCardBack)"></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="addTime" label="提交时间"></el-table-column>
        <el-table-column align="center" prop="" label="认证状态">
          <template slot-scope="scope">
            {{scope.row.status}} <p v-if="scope.row.reason">原因:{{scope.row.reason}}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="checkTime" label="处理时间" v-if="type!='审核中'" ></el-table-column>
        <el-table-column align="center" prop="checkUser" label="处理人" v-if="type!='审核中'"></el-table-column>
        <el-table-column align="center" label="操作" v-if="type=='审核中'|| !type">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="Submit(scope.row)">通过</el-button>
            <el-button type="danger" size="mini" @click="shop=true,result.id=scope.row.id">不通过</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="Page">
          <el-pagination
          background
          hide-on-single-page
            @current-change="handleCurrentChange"
            :current-page="condition.pageIndex"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="condition.quantity">
          </el-pagination>

    </div>
      <div class="hide"  v-if="shop">
        <div class="Popup">
             <h3>不通过原因<i class="el-icon-circle-close" @click="shop=false"></i></h3>
             <el-input
               type="textarea"
               placeholder="请输入内容"
               clearable
               resize='none'
               v-model="result.reason">
             </el-input>
             <el-button type="danger" @click="refuse">不通过</el-button>
             <el-button  @click="shop=false">取消</el-button>
        </div>
      </div>

  </div>
</template>

<script>
  import {realNameAuth,deal} from '@/utils/API'
  import Cookies from 'js-cookie'
  export default{
     inject:["reload"],
    data(){
      return{
        options:[
        {value:'审核中'},
        {value:'认证通过'},
        {value:'认证未通过'}],
         status:'',
         type:'审核中',
        result:{
          status:'',
          reason:''
        },
        list:[],

        shop:false,
        condition:{
          quantity:10,
          pageIndex:1,
          pageSize:10,
        },
        admin:{
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token')
        },
      }
    },
    methods:{
      postList(e){
        realNameAuth(e,this.admin,this.condition).then(res=>{
          this.list=res.data.realNameAuthList
          this.condition.quantity=res.data.total
          console.log(res)
        })
      },
      handleSizeChange(val) {
        this.condition.pageSize=val
       if(this.status){
          this.postList(this.status)
         }else{
          this.postList("审核中")
       }

      },
       handleCurrentChange(val) {
        if(this.status){
           this.postList(this.status)
          }else{
           this.postList("审核中")
        }
      },
      //查询
      query(){
         if(this.status){
            this.postList(this.status)
            this.type=this.status
           }else{
            this.postList("审核中")
         }
        //
      },
      //预览
         getImgList(index){
               let images=[]
               images.push(index)
              return images
          },
      //提交
      Submit(e){
        var _this=this
        this.$confirm('确认用户-'+e.realName+'-认证通过','系统提示',{
          confirmButtonText:'同意',
          cancelButtonText:'取消'
        }).then(()=>{
          _this.result.status='认证通过'
          _this.result.id=e.id
          deal(_this.result,this.admin,this.condition).then(res=>{
            console.log(res)
            if(res.code==0){
              this.$message.success('操作成功')
              _this.reload()
            }
          })
        })
      },
      //拒绝
      refuse(){
        this.result.status="认证未通过"
        if(this.result.reason){
          deal(this.result,this.admin).then(res=>{
            if(res.code==0){
              this.reload()
              this.$message.success('操作成功')
            }
          })
        }else{
          this.$message.error('说明原因')
        }

      }
    },
    mounted() {
      this.postList("审核中")
    }
  }
</script>

<style lang="scss" scoped>
.el-select{
  width: 200px;
  /deep/ .el-input{
    width: 100%;
  }
}
/deep/ .el-input__inner{
  width: 100%;
}
.idCard{
  width: 150px;
  height: 100px;
}
.Popup{
  width: 30%;
  padding-bottom: 10px;
  background-color: #fff;
  position: absolute;
  top: 30vh;
  left: 40%;
  text-align: center;
  z-index: 9;
  border-radius: 5px;
      border: 1px solid #eee;
  h3{
    text-align: left;
    padding: 5px 0 5px 6px;
  }
 .el-textarea{
        width: 80%;
        margin: 2% auto;
        display: block;
  }
}
.hide{
width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}
.hide:hover{
   cursor:pointer;
}
</style>
